<template>
  <div class="film-classic-view">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="movie-title" v-for="item in moremov" :key="item.id" @click="jump1(item.id)">
        <img :src="`${item.img}`" class="movie-picture" />
        <nav>{{ item.nm }}</nav>
        <nav>{{ item.sc }}</nav>
        <!-- <nav>{{ item.sc }}</nav> -->
        <nav>{{ item.enm }}</nav>
        <nav>{{ item.cat }}</nav>
        <nav>{{ item.pubDesc }}</nav>
      </div>
    </van-list>
  </div>
</template>

<script>
import { List } from 'vant';
import axios from "axios";
export default {
  name: "FilmClassicView",
  components: {
    [List.name]: List,
  },
  data() {
    return {
      offset: 0,
      moremov: [],
      total: 1,
      loading: false,
      finished: false,
    };
  },
  methods: {
    jump1(id) {
      let offset = this.offset
      this.$router.replace({ name: "film", params: {id ,offset}})
      // window.sessionStorage.setItem('itemimg', this.moremov)
    },
    onLoad() {
      this.offset += 10
      axios
        .get("/maoyan/ajax/moreClassicList", {
          params: {
            sortId: 1,
            showType: 3,
            limit: 10,
            offset: this.offset,
            optimus_uuid:
              "3F02BD801D6511EDBB72C16CB199FA4632735EFA28174C9DBF684009100890A3",
            optimus_risk_level: 71,
            optimus_code: 10,
          },
        }).then((data) => {
          if (data.status === 200) {
            this.moremov.push(...data.data.classicMovies.list)
            this.total = data.data.classicMovies.total
            this.moremov.forEach((item) => {
              let type = typeof item.sc
              if (item.sc == 0) {
                item.sc = "暂无评分"
              } else if (type == "number") {
                item.sc = item.sc.toFixed(1) + '分';
              }
            })
          } else {
            alert('请求失败')
          }
        }).finally(() => {
          this.loading = false;
        })
    }
  }
}

</script>
<style scoped>
.film-classic-view {
  overflow: auto;
  height: 520px;
}

.movie-title {
  height: 94px;
  width: 100%;
  background-color: #fff;
  margin-top: 15px;
  position: relative;
}

/* 图片 */
.movie-picture {
  width: 66px;
  height: 94px;
  margin-left: 20px;
  float: left;
}

.movie-title nav:nth-of-type(1) {
  font-size: 16px;
  color: #2f2f2f;
  margin: 5px 0 0 10px;
  float: left;
}

.movie-title nav:nth-of-type(2) {
  font-size: 14px;
  color: #f7af1d;
  position: absolute;
  top: 5px;
  left: 340px;
}


.movie-title nav:nth-of-type(3) {
  font-size: 12px;
  color: #606060;
  position: absolute;
  top: 30px;
  left: 96px;
}

.movie-title nav:nth-of-type(4) {
  font-size: 12px;
  color: #606060;
  position: absolute;
  top: 50px;
  left: 96px;
}

.movie-title nav:nth-of-type(5) {
  font-size: 12px;
  color: #606060;
  position: absolute;
  top: 70px;
  left: 96px;
}
</style>
